body{
    background: url("../images/background/project_bg.png ") no-repeat center top;
    background-size: 100%;
    font-family: PingFangSC-Regular,Helvetica,Arial,Microsoft Yahei,sans-serif;min-width: 100%;
    margin:0 auto;
    max-width: 100%;
}

main{
    background:url(../images/background/project_main_bg.png) no-repeat center top;
    background-size: 100%;
}

#menu_project {
    background: #17b8ee;
}
.spilt {
    height:2vh;
}

.TopMenubar {
    width: 100%;
    height: 3vh;
    background: #0642A4;
}

.TopMenubar .TopMain {
    width: 50%;
    height: 3.2vh;
    line-height: 3.05vh;
    margin: 0 auto;
    overflow: hidden;
}

.TopMenubar .TopMain .TopUserInfo{
    float: right;
    font-size: 1rem;
}

.TopMenubar .TopMain .TopUserInfo .TopUserId{
    height: 100%;
    color: #fff;
    padding: 0 0.8vw;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

.TopMenubar .TopMain .TopUserInfo .TopLoginOut{
    height: 100%;
    cursor: pointer;
    padding-bottom: 1vh;
}

.TopMenubar .TopMain .TopUserInfo .TopLoginOut a{
    height: 100%;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.TopMenubar .TopMain .menubar {
    position: relative;
    max-width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1rem;
    overflow: hidden;
    z-index: 1;
    float: left;
}

.TopMenubar .TopMain .menubar .menuitem {
    height: 100%;
    float: left;
    cursor: pointer;
}

.TopMenubar .TopMain .menubar .menuitem a {
    height: 100%;
    color: #fff;
    padding: 0 1.2vw;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

.TopMenubar .TopMain .menubar .menuitem a:hover {
    background: #17b8ee;
}

.ProjectMain{
    width: 56vw;
    margin:0 auto;
    background-size: 100%;
}

.ProjectTitle {
    height: 6.58vh;
    line-height: 6.58vh;
    text-align: center;
    font-size: 1.8rem;
    color: #ffffff;
    font-weight: bold;
    padding-top:2vh;
    width:19vw;
    margin-left: 35%;
}

.ProjectTitle img{
    vertical-align: middle;
    margin-top: -0.38vh;
    margin-left:-0.675vw;
}

.ProjectContainer{
    border-radius: 1.37vh;
    margin: 0 -0.76vh;
    position: relative;
    padding: 0.76vh;
    background: url(../images/background/container_bg.png) repeat left top;
}

.ProjectContainer .container{
    height:65vh;
    background: #fff;
    border-radius:1.37vh;
    padding:4.1vh 3vh 1vw 1.6vw;
}

.ProjectContainer ul li{
    float: left;
    padding:0.3vh;
    width:9.4vw;
    background: #fff;
    border-radius: 0.78vh ;
    box-shadow: 0 0 0.54vw 0 rgb(0 0 0);
    height:20vh;
    margin: 0 0.42vw 0.87vw;
}

.ProjectContainer ul li .img{
    background: #f1f1f1;
    border-radius: 0.78vh 0.78vh 0 0;
}

.ProjectContainer ul li .img img{
    width:10vw;
}
.ProjectContainer ul li .project{
    margin:1.8vh 1.6vh 0 0.87vw ;
}

.ProjectContainer ul li .project .icon{
    float: left;
    width:2.1vw;
}

.ProjectContainer ul li .project .icon img{
    width: 6vh;
}

.ProjectContainer ul li .project .icon .logo_red{

}

.ProjectContainer ul li .project .icon .logo_white{
    display: none;
}

.ProjectContainer ul li .project .text{
    float: right;
    margin-left:5vw;
    width:4.3vw;
    height:8vh;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.ProjectContainer ul li .project .text .name{
    font-size: 1.2rem;
    font-weight: bold;
    color:#111820;
    line-height: 1.74vh;
    margin-bottom:0.37vh;
}

.ProjectContainer ul li .project .text .name_english{
    font-size: 1rem;
    color:#666666;
    line-height: 1.44vh;
}

.ProjectContainer ul li:hover{
    background: url(../images/project/hover.png) no-repeat center bottom;
}

.ProjectContainer ul li:hover .project .icon .logo_red{
    display: none;
}

.ProjectContainer ul li:hover .project .icon .logo_white{
    display: block;
}

.ProjectContainer ul li:hover .project .text .name{
    color:#ffffff;
}

.ProjectContainer ul li:hover .project .text .name_english{
    color:#ffffff;
}
